import styled from 'styled-components'

export const HeaderWrapper = styled.div`
	.content {
		width: 1100px;
		height: 50px;
		border: 1px solid #000;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.logo {
			width: 200px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border-right: 1px solid #ccc;
		}

		.title-list {
			height: 100%;
			width: 100%;

			.title-item {
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-align: center;

				a {
					width: 100%;
					height: 100%;
					line-height: 50px;

					&:hover {
						background-color: pink;
					}
				}

				.title-active {
					background-color: pink;
				}
			}
		}

		.titleRight {
			width: 600px;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.searchInput {
				height: 30px;
				width: 150px;
				border-radius: 15px;
				font-size: 10px;
			}

			.createCenter,
			.login {
				height: 30px;
				border-radius: 15px;
				font-size: 10px;
			}
		}
	}
`
